﻿@extends('layouts.home')
@section('title')
<title>{{config('webconfig.web_title')}}</title>
<meta name="keywords" content="{{Config::get('webconfig.keywords')}}" />
<meta name="description" content="{{Config::get('webconfig.keywords')}}" />
@endsection

<link href="{{asset('home/css/base.css')}}" rel="stylesheet">
<link href="{{asset('home/css/index.css')}}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{{asset('home/js/modernizr.js')}}"></script>
<![endif]-->




@section('content')
<script type="text/javascript" src="/public/js/jquery-1.8.3.min.js"></script>
<style type="text/css">
    ul,li{
      margin:0;
      padding: 0px;
      list-style: none;
    
    }
    .content{
      position: absolute;
      left:300px;
      top:150px;
    }
    .imgs li{
      position: absolute;
      left:0;
      top:0;
      display: none;
    }

    .imgs li:first-child{
      display: block;
    }

    .nums{
      position: absolute;
      background: #333;
      top:300px;
      
        bottom: 20px;
        font-size: 0;
        padding: 4px 8px;
        border-radius: 12px;
        background-color: hsla(0,0%,100%,.3);
        width:88px;
        height: 12px;

        left:330px;

    }

    .nums li{
        margin-right: 10px;
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #fff;
        float:left;
    }
    .nums .click{
      background: red;
    }

    .btn{
      width:20px;
      height:40px;
      background: #333;
      color:#fff;
      text-align: center;
      line-height: 40px;
      font-size: 23px;
      font-weight: bold;
      position: absolute;
      top:150px;
      cursor: pointer;
      display: none;
    }

    .prev{
      left:0;
    }

    .next{
      left:770px;

    }
    
  </style>
<div class="banner">
      <div class="content" style="margin-top:-70px; margin-left:-50px;">
           <ul class="imgs">
          @foreach($data as $k=>$v)
            <li><img src="{{$v->pic}}" height="265" width="790"></li>
          @endforeach
          </ul>
          <ul class="nums" style="margin-top:-80px;">
            <li class="click"></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>

          <div class="btn prev" style="margin-top:-45px;"><</div>
          <div class="btn next" style="margin-top:-45px;">></div>
      </div>
</div>
<script type="text/javascript">
  $(function(){
    // 定义全局的变量  控制图片显示
    var i = 0;
    var time = null;
    _run();
    function _run(){
      if(time == null){
        time = setInterval(function(){
          _show(i);

          i++;

          if(i >= 4){
            i = 0;
          }
        },3000);
      }
    }

    function _show(i){
      $('.imgs li').hide();

      $('.imgs li').eq(i).show();

      $('.nums li').removeClass('click');

      $('.nums li').eq(i).addClass('click');
    }
    $('.nums li').mouseover(function(){
      // 获取li下标
      i = $(this).index();
      _show(i);
    })
    
    $('.prev').click(function(){
      console.log(i)
      if(i <= 0){
        i = 4;
      }
      i--;
      _show(i);
    })

    $('.next').click(function(){
      i++;

      if(i >= 4){
        i = 0;
      }
      _show(i);
    })


    $('ul,li,.btn').mouseover(function(){
      $('.btn').show();
      // 清除定时器
      clearInterval(time);
      time = null;
    }).mouseout(function(){
      _run();
      $('.btn').hide();
    })
  })

</script>
<div class="template">
  <div class="box">
    <h3>
      <p><span>个人博客</span></p>
    </h3>
    <ul>
      @foreach($recommand as $k=>$v)
      <li><a href="{{url('a/'.$v->art_id)}}"  target="_blank"><img src="{{'/'.$v->art_thumb}}"></a><span>{{$v->art_title}}</span></li>
      @endforeach
    </ul>
  </div>
</div>
<article>
  <h2 class="title_tj">
    <p>文章<span>推荐</span></p>
  </h2>
  <div class="bloglist left">
    @foreach($pics as $k=>$v)
    <h3>{{$v->art_title}}</h3>
    <figure><img src="{{'/'.$v->art_thumb}}"></figure>
    <ul>
      <p>{{$v->art_description}}</p>
      <a title="{{$v->art_title}}" href="{{url('a/'.$v->art_id)}}" target="_blank" class="readmore">阅读全文>></a>
    </ul>
    <p class="dateview"><span>{{date('Y-m-d',$v->art_time)}}</span><span>作者：{{$v->art_editor}}</span></p>
    @endforeach
  </div>
  <aside class="right">
    <div class="weather"><iframe width="250" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1"></iframe></div>
    <div class="news">
    @parent

    <h3 class="links">
      <p>友情<span>链接</span></p>
    </h3>
    <ul class="website">
       @foreach($link as $k => $v)
      <li><a href="{{$v['link_url']}}">{{$v->link_name}}</a></li>

       @endforeach
    </ul> 
    </div>  
    <!-- Baidu Button BEGIN -->
    <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"><a class="bds_tsina"></a><a class="bds_qzone"></a><a class="bds_tqq"></a><a class="bds_renren"></a><span class="bds_more"></span><a class="shareCount"></a></div>
    <script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=6574585" ></script> 
    <script type="text/javascript" id="bdshell_js"></script> 
    <script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script> 
    <!-- Baidu Button END -->   
    </aside>
</article>
@endsection
